<template>
  <div>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" title="预制目录">
        <a-input placeholder="请输入搜索内容" allow-clear class="mb-4" />
        <div
          v-for="(item, index) in prefabricated"
          :key="index"
          class="text"
          :class="{ 'active-text': selectedIndex === index }"
          @click="handleSelect(index, item)"
        >
          {{ item.name }}
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" title="自定义目录">自定义木鹿</a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type prefabricatedType from './type'

const emit = defineEmits(['menu-click'])
const prefabricated = ref([
  {
    name: '参数类',
    value: '1',
  },
  {
    name: '柱状图',
    value: '2',
  },
  {
    name: '饼图',
    value: '3',
  },
])
const selectedIndex = ref<number>(0)
const handleSelect = (index: number, item: prefabricatedType) => {
  selectedIndex.value = index
  emit('menu-click', item)
}
</script>

<style lang="scss" scoped>
.text {
  @apply p-2 w-full h-[38px] cursor-pointer transition-colors duration-200 text-center;

  &:hover {
    background-color: #f5f5f5;
  }

  &.active-text {
    background: linear-gradient(270deg, #dae9ff 0%, #dae9ff 100%);
  }
}
</style>
